<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    integrity="sha384-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
    crossorigin="anonymous" />
  <link rel="stylesheet" href="/css/style.css" />
  <title>广科大校内实习网站</title>

  <!-- 看板娘 -->
  <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

  <!-- 音乐播放器 -->
  <!-- APlayer CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
  <!-- APlayer JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

  <style>
    /****************************************************
    看板娘 */
    #aplayer-wrapper {
      position: fixed;
      bottom: 20px;
      /* 距离底部的距离 */
      right: 20px;
      /* 距离右侧的距离 */
      z-index: 9999;
      /* 设置较高的z-index确保它显示在其他元素之上 */
    }

    /****************************************************
    鼠标移动动画 */
    .star {
      position: fixed;
      pointer-events: none;
      width: 5px;
      height: 5px;
      background: white;
      border-radius: 50%;
      opacity: 1;
      animation: fadeOut 200ms linear forwards;
      z-index: 9999;
    }

    @keyframes fadeOut {
      from {
        opacity: 1;
      }

      to {
        opacity: 0;
      }
    }

    /****************************************************
    鼠标移动动画 */

    /****************************************************
    鼠标点击动画 */
    #cat-paw {
      display: none;
      /* 初始时隐藏猫爪 */
      position: fixed;
      /* 可以根据需要定位猫爪 */
      /* 其他样式，如大小、背景等 */
      width: 50px;
      height: 50px;
      z-index: 9999;
    }

    audio {
      display: none;
      /* 隐藏音频元素 */
    }

    /****************************************************
    鼠标点击动画 */
  </style>

  <!-- 音乐播放器 -->
  <!-- 音乐播放器 -->
  <!-- 播放器的容器 -->
  <div id="aplayer-wrapper"></div>

  <script>
    // Aplayer的初始化代码，设置autoplay为true以自动播放  
    var ap = new APlayer({
      container: document.getElementById('aplayer-wrapper'),
      autoplay: true, // 设置为true以自动播放  
      loop: 'all', //循环列表
      // 其他配置项...  
      music: {
        title: '遠い空へ',
        artist: '市川淳',
        url: 'http://music.163.com/song/media/outer/url?id=477913.mp3',
        cover: 'http://p1.music.126.net/OpgpNNPKznDDMxoBqVJy-Q==/2464005557906815.jpg',
        // ...其他音乐相关的配置项  
      }
    });  
  </script>
  <!-- 音乐播放器 -->



</head>

<body class="bg-gray-100">

  <!-- 鼠标移动光效 -->
  <div id="starContainer"></div>

  <!-- 鼠标点击效果 -->
  <!-- 鼠标点击效果 -->
  <img id="cat-paw" src="/images/cat_paw.png" alt="Cat Paw">
  <audio id="cat-meow" preload="auto">
    <source src="/images/cat_meow.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
  <!-- 鼠标点击效果 -->


  <script>

    /********************************************************************************
    * 鼠标光效
    */
    const starContainer = document.getElementById('starContainer');
    // const scrollContainer = document.body;
    let lastMousePos = { x: 0, y: 0 };

    // 添加移动事件监听器  
    document.addEventListener('mousemove', (event) => {
      lastMousePos = { x: event.clientX, y: event.clientY };
      createStar(lastMousePos);
    });

    // 添加滚动事件监听器  
    // window.addEventListener('scroll',  (event) => {
    //   const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    //   const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
    //   // star.style.transform = `translate(${position.x - scrollLeft}px, ${position.y - scrollTop}px)`;

    //   const newX  = `${lastMousePos.x - scrollLeft}px`;
    //   const newY  = `${lastMousePos.y - scrollTop}px`;

    //   console.log(scrollTop,newX,newY);

    //   lastMousePos = { x: newX, y: newY };
    //   createStar(lastMousePos);
    // });

    // 如果你需要在某个时间点清理所有星光（比如页面卸载时），可以遍历stars数组并调用每个清理函数  
    window.addEventListener('beforeunload', () => {
      stars.forEach(cleanup => cleanup());
    });

    function createStar(position) {
      const star = document.createElement('div');
      star.classList.add('star');

      // 设置星光的其他样式...  
      // 随机大小，通过修改大小实现  
      const randomSize = Math.random() * 5; // 大小范围从0到5
      star.style.width = `${randomSize}px`;
      star.style.height = `${randomSize}px`;

      // 随机亮度，通过修改透明度实现  
      const randomOpacity = Math.random() * 0.5 + 0.5; // 透明度范围从0.5到1  
      star.style.opacity = randomOpacity.toString();

      // 随机偏移位置  
      const offsetX = Math.random() * 50 - 20; // 假设最大偏移20px，向左或向右  
      const offsetY = Math.random() * 50 - 20; // 假设最大偏移20px，向上或向下  

      // 计算新的位置  
      const newX = position.x + offsetX;
      const newY = position.y + offsetY;

      star.style.left = `${newX}px`;
      star.style.top = `${newY}px`;

      // // 监听滚动事件来更新星光位置  
      // function updateStarPosition() {
      //   const scrollTop = document.scrollTop || document.documentElement.scrollTop;
      //   const scrollLeft = document.scrollLeft || document.documentElement.scrollLeft;
      //   // star.style.transform = `translate(${position.x - scrollLeft}px, ${position.y - scrollTop}px)`;

      //   star.style.left = `${position.x - scrollLeft}px`;
      //   star.style.top = `${position.y - scrollTop}px`;
      // }


      starContainer.appendChild(star);

      // 设置星光淡出后的清理函数  
      const cleanupStar = () => {
        starContainer.removeChild(star);
        // const index = stars.indexOf(cleanupStar);
        // if (index !== -1) {
        //   stars.splice(index, 1);
        // }
        // scrollContainer.removeEventListener('scroll', updateStarPosition);
      };

      // 使用setTimeout设置淡出后的清理时间  
      setTimeout(cleanupStar, 2000); // 假设淡出动画是2秒  

      // 将清理函数添加到数组中，以便后续可能的清理（虽然在这个例子中我们不会用到）  
      // stars.push(cleanupStar);
    }

    /********************************************************************************
    * 鼠标点击出现猫爪和猫叫
    */
     // 获取音频元素  
  var catMeowAudio = document.getElementById('cat-meow');  
  
    document.addEventListener('click', function (event) {
         // 停止之前的音频（如果存在）  
    if (catMeowAudio.paused === false) {  
      catMeowAudio.pause();  
      catMeowAudio.currentTime = 0; // 重置音频到开始位置  
    }  
  
      // 显示猫爪  
      var catPaw = document.getElementById('cat-paw');
      catPaw.style.display = 'block';

      // 计算偏移后的位置  
      var offsetX = -27; // 左侧偏移量  
      var offsetY = -30; // 上方偏移量（负值表示向上偏移）  

      // 设置猫爪的位置  
      catPaw.style.left = (event.clientX + offsetX) + 'px';
      catPaw.style.top = (event.clientY + offsetY) + 'px';

      // 播放猫叫声音  
      catMeowAudio.play();  
  

      // （可选）一段时间后隐藏猫爪（如果需要）  
      setTimeout(function () {
        catPaw.style.display = 'none';
      }, 300); // 假设0.5秒后隐藏和停止  
    });

  </script>